<template>
  <div id="footer">
    <el-row :gutter="10">
      <el-col :span="9">
        <div class="grid-content">{{ $t('Footer.Top3') }}</div>
      </el-col>
      <el-col :span="5">
        <div class="grid-content">{{ props.footerstring1 }}</div>
      </el-col>
      <el-col :span="5">
        <div class="grid-content">{{ props.footerstring2 }}</div>
      </el-col>
      <el-col :span="5">
        <div class="grid-content">{{ props.footerstring3 }}</div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
const props = defineProps<{
  footerstring1: string;
  footerstring2: string;
  footerstring3: string;
}>();
</script>

<style lang="scss" scoped>
div#footer {
  height: 100%;
}
.grid-content {
  text-align: center;
  font-size: xx-large;
  background: #1a1a5f;
  color: #ffffff;
}
</style>
